<template>
  <scroll-view
    v-if="skLoding"
    scroll-y
    class="detail"
    @scrolltolower="getMoreComment"
  >
    <view class="detail-header">
      <view class="detail-header-swiper">
        <swiper
          class="swiper"
          circular
          indicator-dots
          autoplay
          :interval="3000"
          :duration="1000"
        >
          <swiper-item v-for="item in data.media.cover" :key="item.id">
            <image :src="item.imgUrl" mode="aspectFill" />
          </swiper-item>
        </swiper>
      </view>

      <view class="detail-header-panel">
        <view class="panel-top">
          <image
            :src="data.media.cover[0].imgUrl"
            mode="aspectFill"
            class="panel-img"
          />
          <view class="panel-title"
            >{{ data.name }}
            <uni-tag
              :inverted="true"
              :text="data.category"
              mark
              size="small"
              type="warning"
          /></view>
          <view class="panel-rate"
            ><uni-rate
              size="18"
              :readonly="true"
              :value="Number(data.rating)"
            />{{ Number(data.rating) }}</view
          >
        </view>
        <view class="panel-content">
          <view class="price">￥{{ data.price }}/人</view>
          <view class="phone"
            >联系电话：{{ data.phone
            }}<uni-icons
              type="phone-filled"
              color="#fff"
              size="16"
              class="phone-icon"
              @click="callPhone(data.phone)"
          /></view>
        </view>
        <view class="panel-address">
          <uni-icons type="location-filled" color="#555" size="24" />
          <view class="address" @tap="openMap(data.latitude, data.longitude)">
            {{ data.location.split("市")[1] }}
            <uni-icons type="right" color="#555" size="12"
          /></view>

          <uni-fav
            :checked="favChecked"
            class="favBtn"
            :circle="true"
            bg-color="#eeeeee"
            bg-color-checked="#ffa500"
            fg-color="#555"
            fg-color-checked="#ffffff"
            @click="favClick"
          />
        </view>
      </view>
    </view>
    <view class="detail-intro-panel">
      <uni-section title="详细介绍" titleFontSize="16px" type="line"
        ><view class="intro">{{ data.introduction }}</view></uni-section
      >
    </view>
    <view class="detail-video-panel" v-if="data.media.videos.length > 0">
      <uni-section title="视频介绍" titleFontSize="16px" type="line"
        ><video
          :src="data.media.videos.path"
          http-cache
          id="popup-video"
          @play="play"
        ></video
      ></uni-section>
    </view>

    <view class="detail-images-panel">
      <image
        v-for="item in data.media.images || data.media.cover"
        :key="item.id"
        :src="item.imgUrl"
        mode="scaleToFill"
        class="image"
      />
    </view>
    <view class="detail-recommend-panel">
      <uni-section title="附近推荐" titleFontSize="16px" type="line"
        ><view class="recommend" v-if="recommendData.length">
          <view
            class="recommend-item"
            v-for="(item, index) in recommendData"
            :key="item.id"
            @tap="goDetail(item.id, item.type)"
          >
            <view class="recommend-img">
              <image :src="item.media[0].imgUrl" mode="aspectFill" />
            </view>
            <view class="right">
              <view class="recommend-info">
                <view class="recommend-title">{{ item.name }}</view>
                <view class="recommend-tag"
                  ><view class="rate"
                    ><uni-icons
                      type="star-filled"
                      color="#ffa500"
                      size="16"
                    />{{ item.rating }}</view
                  >
                  <uni-tag
                    :inverted="true"
                    :mark="true"
                    :text="item.category"
                    type="warning"
                    size="small"
                /></view>
                <view class="recommend-price"
                  >￥{{ item.price.split(".")[0] }}</view
                >
                <view class="recommend-location"
                  ><uni-icons type="map-filled" color="#999" size="16" />
                  {{ item.location }}</view
                >
              </view>

              <view class="recommend-extra">
                <uni-icons type="right" color="#999" size="24" />
              </view>
              <view class="distance"
                >距离{{
                  mapUtils.distance(
                    +item.latitude,
                    +item.longitude,
                    data.latitude,
                    data.longitude
                  )
                }}</view
              >
            </view>
          </view>
        </view>
        <view v-else class="no-recommend">暂无推荐</view>
      </uni-section>
    </view>
    <view
      class="detail-comment-panel"
      :style="{ paddingBottom: safeAreaInsets?.bottom + 'px' }"
    >
      <view class="title"
        ><view
          ><uni-icons type="chatbubble-filled" color="#555" size="24" />
          相关评论</view
        >
        <view class="add-comment" @tap="addComment(data.type, data.id)"
          ><uni-icons type="plus" color="#fff" size="24" />发布评论</view
        >
      </view>
      <commentList
        ref="commentListRef"
        :id="data.id"
        :params="commentParams"
      ></commentList>
    </view>
  </scroll-view>
  <DetailSkeleton v-else></DetailSkeleton>
</template>

<script lang="ts" setup>
import { onLoad } from "@dcloudio/uni-app";
import { ref } from "vue";
import {
  getDetailDataAPI,
  getRecommendAPI,
  addCollectDataAPI,
  removeCollectDataAPI,
  getHasFavAPI,
} from "@/services/index";
import DetailSkeleton from "./detailSke.vue";
import commentList from "../comment/components/commentList.vue";
import mapUtils from "@/utils/map";
import type { CommentData } from "@/services/type";

import { useMemberStore } from "@/stores";

const memberStore = useMemberStore();

let data = ref<any>({});

let commentListRef = ref();
let safeAreaInsets = ref();
let skLoding = ref(false);
let favChecked = ref(false);
let favClick = async () => {
  if (isLogin()) {
    favChecked.value = !favChecked.value;
    if (favChecked.value) {
      let result: any = await addCollectDataAPI({
        userId: memberStore.profile.user_id,
        type: data.value.type,
        typeId: data.value.id,
      });
      if (result.code === 200) {
        uni.showToast({
          title: "收藏成功",
          icon: "none",
        });
      }
    } else {
      let result: any = await removeCollectDataAPI({
        userId: memberStore.profile.user_id,
        type: data.value.type,
        typeId: data.value.id,
      });
      if (result.code === 200) {
        uni.showToast({
          title: "取消收藏",
          icon: "none",
        });
      }
    }
  } else {
    uni.showToast({
      title: "请先登录",
      icon: "none",
    });
  }
};
const isFav = async () => {
  if (isLogin()) {
    let result: any = await getHasFavAPI({
      userId: memberStore.profile.user_id,
      type: data.value.type,
      typeId: data.value.id,
    });
    if (result.code === 200) {
      favChecked.value = true;
    } else {
      favChecked.value = false;
    }
  }
};
let commentParams = ref<CommentData>();
onLoad(async (options: any) => {
  wx.showShareMenu({
    withShareTicket: true,
    //设置下方的Menus菜单，才能够让发送给朋友与分享到朋友圈两个按钮可以点击
    menus: ["shareAppMessage", "shareTimeline"],
  });

  uni.getSystemInfo({
    success: (res) => {
      safeAreaInsets.value = res.safeAreaInsets;
    },
  });
  let { id, type } = options;
  await getDetailData(id, type);
  isFav();
});

const isLogin = () => {
  if (memberStore.profile) {
    return true;
  } else {
    return false;
  }
};
let recommendData = ref<any>([]);
const getDetailData = async (id: number, type: string) => {
  let result: any = await getDetailDataAPI(id, type);
  console.log(result.data);
  if (result.code === 200) {
    data.value = result.data;
    commentParams.value = {
      page: pageParams.page,
      limit: pageParams.size,
      userId: "",
      type: data.value.type,
      typeId: data.value.id,
    };
    let location = {
      longitude: +data.value.longitude,
      latitude: +data.value.latitude,
    };
    let recommend: any = await getRecommendAPI(location, 5);

    for (let i = 0; i < recommend.data.length; i++) {
      if (recommend.data[i].id != id) {
        recommendData.value.push(recommend.data[i]);
      }
    }

    skLoding.value = true;
  } else {
    uni.showToast({
      title: "获取数据失败",
      icon: "none",
    });
  }
};
// 评论列表分页参数
let pageParams = {
  page: 1,
  size: 5,
};
// 打电话
const callPhone = (number: string) => {
  uni.makePhoneCall({
    phoneNumber: number,
  });
};
// 打开地图
const openMap = (lats: string, lngs: string) => {
  const { latitude, longitude } = mapUtils.BaiduMapTransTxMap(+lngs, +lats);
  uni.openLocation({
    latitude,
    longitude,
    name: data.name,
    address: data.location,
  });
};

const getMoreComment = () => {
  commentListRef.value.getMore();
};

const addComment = (type: string, id: number) => {
  if (!memberStore.profile) {
    uni.showModal({
      title: "请先登录",
      content: "是否前往登录",
      success: (res) => {
        if (res.confirm) {
          uni.switchTab({ url: "/pages/my/index" });
        }
      },
    });
  } else {
    uni.navigateTo({
      url: `/pages/comment/addComment/addComment?id=${id}&type=${type}`,
    });
  }
};
const goDetail = (id: number, type: string) => {
  uni.navigateTo({
    url: `/pages/detail/detail?id=${id}&type=${type}`,
  });
};
// 播放时进入全屏
function play(this: any, index: any) {
  let videoContext = uni.createVideoContext("popup-video", this);
  videoContext.requestFullScreen();
}
</script>

<style scoped lang="scss">
.detail {
  height: calc(100vh - var(--window-top));
  position: relative;

  .detail-header {
    .detail-header-swiper {
      height: 35vh;
      width: 100%;
      .swiper {
        height: 100%;
        width: 100%;
        image {
          height: 100%;
          width: 100%;
        }
      }
    }
    .detail-header-panel {
      height: auto;
      background-color: white;
      width: 100%;
      // display: flex;

      .panel-top {
        height: 100rpx;
        position: relative;
        border-bottom: 1rpx solid #f5f5f5;
        font-weight: bold;

        .panel-img {
          position: absolute;
          top: -75rpx;
          left: 20rpx;
          border: 10rpx solid #f5f5f5;
          border-radius: 25%;
          width: 150rpx;
          height: 150rpx;
        }
        .panel-title {
          position: absolute;
          top: 20rpx;
          left: 200rpx;
          font-size: 40rpx;
        }
        .panel-rate {
          position: absolute;
          top: 20rpx;
          right: 10rpx;
          font-size: 24rpx;
          color: #555;
          display: flex;
          justify-content: flex-end;
          align-items: center;
        }
      }

      .panel-content {
        box-sizing: border-box;
        padding: 5rpx 10rpx;
        width: 100%;
        height: 60rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: #555;
        font-size: 24rpx;
        border-bottom: 1rpx solid #f5f5f5;
        .price {
          font-size: 26rpx;
        }
        .phone {
          .phone-icon {
            margin-left: 10rpx;
            width: 36rpx;
            height: 36rpx;
            text-align: center;
            background-color: #999;
            border-radius: 40%;
          }
        }
      }
      .panel-address {
        color: #555;
        font-size: 24rpx;
        display: flex;
        align-items: center;
        height: 60rpx;
        padding-right: 100rpx;
        position: relative;
        .favBtn {
          position: absolute;
          top: 8rpx;
          right: 10rpx;
        }
      }
    }
  }
  .detail-intro-panel {
    margin-top: 15rpx;
    .intro {
      padding: 10rpx;
      font-size: 26rpx;
    }
  }

  .detail-video-panel {
    margin-top: 15rpx;
    video {
      width: 100%;
    }
  }

  .detail-images-panel {
    width: 100%;
    margin-top: 15rpx;
    background-color: white;
    padding: 10rpx 0;

    image {
      width: 100%;
    }
  }
  .detail-recommend-panel {
    margin-top: 15rpx;
    .recommend {
      .recommend-item {
        height: 230rpx;
        padding: 10rpx;
        display: flex;
        align-items: center;

        .recommend-img {
          display: inline-block;
          width: 28%;
          height: 200rpx;
          overflow: hidden;
          border-radius: 15%;
          margin-right: 10rpx;
          image {
            width: 100%;
            height: 100%;
          }
        }

        .right {
          height: 200rpx;
          width: 70%;
          display: flex;
          color: #555;
          justify-content: space-between;
          position: relative;
          .recommend-info {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            font-size: 28rpx;

            .recommend-title {
              font-size: 36rpx;
              font-weight: bold;
            }
            .recommend-tag {
              width: 45%;
              padding: 10rpx 0;
              display: flex;
              justify-content: space-between;
              align-items: center;

              .rate {
                font-weight: bold;
                color: #ffa500;
              }
            }
            .recommend-price {
              font-weight: bold;
              color: #c50f0f;
            }
            .recommend-location {
              font-size: 24rpx;
            }
          }

          .recommend-extra {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
          }

          .distance {
            position: absolute;
            right: 10rpx;
            font-size: 24rpx;
          }
        }
      }
    }
    .no-recommend {
      font-size: 24rpx;
      color: #555;
      text-align: center;
      padding: 10rpx;
    }
  }
  .detail-comment-panel {
    margin-top: 15rpx;
    width: 100%;
    .title {
      height: 60rpx;
      font-size: 36rpx;
      font-weight: bold;
      padding: 10rpx 10rpx;
      color: #555;
      background-color: white;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .add-comment {
        height: 100%;
        color: #fff;
        background-color: #ffa500;
        padding: 0 10rpx;
        border-radius: 15rpx;
        display: flex;
        align-items: center;
        font-size: 24rpx;
      }
    }
  }
}
</style>
